<template>
   <div>
      <!-- <div>{{ num}} <button @click="num++">+</button></div> -->
      <div>{{ doubleNum }}</div>
      <button @click="num++">+</button>
      <hr>
      <div>{{ person}}</div>
      <button @click="person.age++">更改年龄</button>
   </div>
</template>
<!-- 
   侦听器：当响应式状态或者计算属性变化的时候来监听
   一、选项式API的watch
   1、简写形式
      1) 基本数据类型
      watch:{
         响应式数据|计算属性(更新后的变量,更新之前的变量){

         }
      }
      2)侦听对象中的属性的变化
      watch:{
         "对象名.属性名"(更新后的值，更新之前的值){

         }
      }
   2、标准写法
   watch:{
      对象名:{
         handler(更新后的值,更新之前的值){

         },
         deep:true,//是否开启深度监听
         immediate:true//是否开启立即监听
      }
   }
 -->
<script lang='ts'>
 export default{
   data(){
      return{
         num:0,
         person:{
            name:'Giles',
            age:18
         }
      }
   },
   computed:{
      doubleNum(){
         return this.num*2
      }
   },
   // watch:{
   //    num(newval,oldval){
   //       console.log('侦听data数据的变化',newval,oldval);
   //    },
   //    doubleNum(newval,oldval){
   //       console.log('侦听计算属性数据的变化',newval,oldval);
   //    },
   //    "person.age"(newval,oldval){
   //       console.log('侦听对象中的属性',newval,oldval);
   //    }
   // }
   watch:{
      person:{
         handler(newval,oldval){
            console.log('监听对象的变化',newval,oldval);
         },
         deep:true,
         immediate:true
      }
   }
 }
</script>

<style lang='scss' scoped>
</style>